<!--  -->
<template>
    <div>
        toRef非响应式对象：{{ man }}
    </div>
    <div> toRef响应式对象：{{ woman }}</div>
    <div>
        toRefs: {{ name }} -- {{ age }}
    </div>
    <div>
        toRaw: {{ name1 }} -- {{ age3 }}
    </div>
    <div>
        <button @click="change">修改</button>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted, getCurrentInstance, toRef, toRefs, toRaw } from "vue";

    // toRef 只能修改响应式对象的值  非响应式视图毫无变化但是数据可以改变
    const man = { name: '张三', age: 55 };
    const woman = reactive({ name: '里斯', age: 18 })

    let [age1, age2] = [toRef(man, 'age'), toRef(woman, 'age')]

    //  toRefs 能够将响应式对象全部分解，不像toRef需要标明是哪个属性
    let { name, age } = toRefs(woman);
    console.log(name, age);

    //  toRaw 将响应式对象还原为普通对象，这样就不会做视图操作了
    let { name:name1, age:age3 } = toRaw(woman)
    

    const change = ()=>{
        age1.value = 28;
        age2.value = 7;
        name.value = '李四'
        console.log(`age1: ${age1.value}, age2: ${age2.value}`);        
    }

    
    onMounted(()=>{  })
</script>
<style scoped lang="less">
</style>